<template>
  <div class="search-result">
    <div class="search-header">
      <div class="back" @click="handleBack">
        <van-icon name="arrow-left"></van-icon>
      </div>
      <div class="input">
        <form @submit.prevent="handleSearch">
          <input v-model.trim="params.remark" type="search" placeholder="O que procuras?" />
        </form>
      </div>
    </div>
    <div class="flex mt15 ph10">
      <div class="flex-1 mr5">
        <div class="cate-select" @click="handleCateSelect">
          <div class="left">{{ typeName }}</div>
          <div class="right" @click="handleCateClear">
            <van-icon size="16" :name="categoryName || sectionName ? 'cross' : 'arrow-down'"></van-icon>
          </div>
        </div>
      </div>
      <div class="flex-1 ml5">
        <div class="cate-select" @click="handleLocationSelect">
          <div class="left">{{ locationName }}</div>
          <div class="right" @click="handleLocationClear">
            <van-icon size="16" :name="pName || cName ? 'cross' : 'arrow-down'"></van-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="search-list">
      <GoodsItem :detail="item" v-for="item in list" :key="item.id" />
    </div>
    <ModalCate v-if="cateShow" :category-id="params.categoryId" :section-id="params.sectionId" @close="cateShow = false" @confirm="handleCateConfirm" />
    <ModalLocation v-if="locationShow" :p-code="pCode" :c-code="cCode" @close="locationShow = false" @confirm="handleLocationConfirm" />
  </div>
</template>
<script>
import Api from "@/api";
import { Domain } from "@/constants";
import GoodsItem from "@/components/goods-item";
import ModalCate from "@/components/modal-cate";
import ModalLocation from "@/components/modal-location";

export default {
  name: "SearchResult",
  components: { GoodsItem, ModalCate, ModalLocation },
  data() {
    return {
      list: [],
      params: {
        area: "",
        remark: "",
        type: "",
        pageSize: 10,
        pageNo: 1,
        sectionId: "",
        categoryId: "",
        areaCode: "",
      },
      categoryName: "",
      sectionName: "",
      cateShow: false,
      locationShow: false,
      cName: "",
      pName: "",
      pCode: "",
      cCode: "",
    };
  },
  created() {
    const { keywords = "", sectionName = "", sectionId = "", cateShow = 0 } = this.$route.query;
    this.sectionName = sectionName;
    this.params.sectionId = sectionId;
    this.params.remark = keywords;
    this.params.type = sectionId;
    this.cateShow = cateShow == 1;
    this.handleSearch();
  },
  beforeRouteEnter (to,from,next){
    next(that=>{
      if(from.path === '/detail'){
        that.cateShow = false
        that.params = sessionStorage.getItem('typeParams')
        that.handleSearch()

      }
    })
  },
  computed: {
    typeName() {
      const { sectionName = "", categoryName = "" } = this;
      return categoryName ? categoryName : sectionName ? sectionName : "Select Category";
    },
    locationName() {
      const { pName = "", cName = "" } = this;
      return cName ? cName : pName ? pName : "Select Location";
    },
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    handleSearch() {
      Api.getGoodsList(this.params, this.params.pageNo, this.params.pageSize).then((res) => {
        this.list = res.rows.map((item) => {
          const img = item.imgList ? JSON.parse(item.imgList)[0] : "";
          return Object.assign(item, { showImg: Domain + img });
        });
      });
    },
    handleCateSelect() {
      this.cateShow = true;
    },
    handleCateConfirm(item) {
      this.cateShow = false;
      this.params = Object.assign({}, this.params, { ...item.query, pageNo: 1 });
      this.categoryName = item.categoryName;
      this.sectionName = item.sectionName;
      this.handleSearch();
      sessionStorage.setItem('typeParams',this.params)
    },
    handleCateClear() {
      this.params.type = "";
      this.params.sectionId = "";
      this.sectionName = "";
      this.categoryName = "";
      this.params.categoryId = "";
      this.params.pageNo = 1;
      this.handleSearch();
    },
    handleLocationSelect() {
      this.locationShow = true;
    },
    handleLocationConfirm(item) {
      this.locationShow = false;
      this.cName = item.cityName;
      this.pName = item.provinceName;
      this.pCode = item.provicenCode;
      this.cCode = item.cityCode;

      this.params.pageNo = 1;
      if (item.cityCode) {
        this.params.area = [item.provicenCode, item.cityCode].join(",");
        this.params.areaCode = [item.provicenCode, item.cityCode].join("/");
      } else {
        this.params.area = item.provicenCode;
        this.params.areaCode = item.provicenCode;
      }

      this.handleSearch();
    },
    handleLocationClear() {
      this.cName = "";
      this.pName = "";
      this.pCode = "";
      this.cCode = "";
      this.params.area = "";
      this.params.areaCode = "";
      this.params.pageNo = 1;
      this.handleSearch();
    },
  },
};
</script>
<style lang="less" scoped>
.search-result {
  .search-header {
    display: flex;
    align-items: center;
    height: 50px;
    background: #fff;
    padding: 0 16px;
    box-sizing: border-box;
    .back {
      flex: none;
      margin-right: 16px;
      display: flex;
      align-items: center;
    }
    .input {
      flex: auto;
      width: 0;
      input {
        height: 35px;
        line-height: 35px;
        width: 100%;
        border: none;
        outline: none;
      }
    }
  }
  .cate-select {
    display: flex;
    align-items: center;
    border: 1px solid #ededed;
    padding: 10px 5px;
    font-size: 14px;
    background: #fff;
    color: #666;
    border-radius: 3px;
    .left {
      flex: auto;
      width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .right {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  .search-list {
    padding: 12px;
  }
}
</style>
